<template>
    <el-popover
        placement="bottom-start"
        width="300"
        trigger="manual"
        v-model="data.visible">
        <el-form ref="formRef" :model="data.form" label-position="right" label-width="auto">
            <div class="mb-[10px] label_name">自动回复时间</div>
            <el-form-item label="" prop="delay" :rules="[{required:false,message:'不能为空',trigger:'blur'},{pattern:/^([1-9]|[1-5]\d|60)$/,message:'请输入1-60整数',trigger:'blur'}]">
                <el-input v-model="data.form.delay" class="width-50" placeholder="请输入1-60整数">
                    <!-- <i slot="suffix" style="font-style:normal;margin-right: 10px;">分钟</i> -->
                </el-input>
                <span class="ml-[8px] label_name">分钟</span>
            </el-form-item>

            <div class="mb-[10px] label_name">自动回复内容</div>
            <el-form-item label="" prop="content" :rules="$validate.validates({required:false,msg:'不能为空'})">
                <el-input class="flex-input" type="textarea" v-model="data.form.content" :rows="5"  maxlength="100" show-word-limit placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <div style="text-align: right; margin: 0">
            <el-button class="ed-button ed_white_bottom" @click="close">取消</el-button>
            <el-button class="ed-button ed_black-bottom" @click="save" :loading="data.loading">确定</el-button>
        </div>
        <el-button slot="reference" class="ed-button ed_white_bottom-bottom ed-button36" @click="autoReply"><i class="el-icon-s-tools"></i> 自动回复设置</el-button>
    </el-popover>
</template>

<script setup>
import * as api from "src/api/workbench"; 
import { onDeactivated, reactive, ref, defineExpose } from 'vue';
import message from 'src/utils/once-message'
    const data = reactive({
        visible: false,
        loading: false,
        form: {
            delay: '3',
            content: '欢迎您的到来，有疑问可留言咨询，物业人员将尽快回复处理！'
        }
    })

    function autoReply(){
        api.getAutoReplyApi({}).then(res=>{
            if(res.success){
                Object.assign(data.form, res.data)
                // data.form.delay = res.data&&res.data.delay||'3'
                // data.form.content = res.data&&res.data.content||'欢迎您的到来，有疑问可留言咨询，物业人员将尽快回复处理！'
                data.visible = true
            }
        })
    }
    const formRef = ref()
    // const emit = defineEmits(['save'])
    function save(){
        data.loading = true
        formRef.value.validate(valid=>{
            if(valid){
                // emit('autoRepleSave', data.form)
                api.saveAutoReplyApi(data.form).then(res=>{
                    if(res.success){
                        message.success({
                            message: "操作成功",
                            duration: 2000,
                            center: true
                        });
                        close()
                    }
                }).catch(()=>{
                    cancelLoading()
                })
            }else{
                cancelLoading()
            }
        })
    }
    function close(){
        data.loading = false
        data.visible = false
        // formRef.value.resetFields()
        formRef.value.clearValidate()
    }
    function cancelLoading(){
        data.loading = false
    }
    defineExpose({cancelLoading, close})
</script>

<style scoped>
    .label_name{
        font-size: 14px;
        line-height: 22px;
        color: #606266;
    }
</style>